<template>
  <div
    class="title-text"
    :style="{
      height: px2rpx2px(props.height),
      color: props.color,
      backgroundColor: props.bgColor,
    }"
  >
    {{ props.title }}
  </div>
</template>

<script>
const propConfig = {
  name: {
    type: String,
    default: "TitleText",
  },
  title: {
    label: "文本",
    type: String,
    default: "",
    editType: "el-input",
  },
  height: {
    label: "高度",
    type: String,
    default: "40px",
    editType: "el-input",
  },
  color: {
    label: "字体颜色",
    type: String,
    default: "rgba(0, 0, 0, .8)",
    editType: "el-color-picker",
  },
  bgColor: {
    label: "背景色",
    type: String,
    default: "white",
    editType: "el-color-picker",
  },
};
</script>

<script setup>
import { defineProps, defineComponent } from "vue";
import { px2rpx2px } from "../utils/index";

defineComponent({ name: "TitleText" });
const props = defineProps(propConfig);
</script>

<style lang="scss" scoped>
.title-text {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  box-sizing: border-box;
}
</style>
